<template>
    <view class="container">
        <view class="img-container">
            <image class="img" src="../../static/logo.png"></image>
        </view>
        <view class="img-text">车管通销售版 2.0</view>
        <form action="" @submit="loginFormSubmit">
            <view class="input-item">
                <view class="icon iconfont iconmy"></view>
                <view class="input-box">
                    <input class="input" placeholder="请输入用户名" type="text" name="username" v-model="username" @input="userInput"
                        maxlength="30" placeholder-class="pla-class">
                </view>
                <view class="right">
                    <view v-if="isShowUserClose" @click="userClear" class="icon iconfont iconroundclose"></view>
                </view>
            </view>

            <view class="input-item">
                <view class="icon iconfont iconlock"></view>
                <view class="input-box">
                    <input class="input" placeholder="请输入密码" type="password" name="password" v-model="password" @input="passInput"
                        maxlength="30" placeholder-class="pla-class">
                </view>

                <view class="right">
                    <view v-if="isShowPassClose" @click="passClear" class="icon iconfont iconroundclose"></view>
                </view>
            </view>


            <view class="button-container">
                <button class="button" form-type="submit">登录</button>
            </view>
            <view class="tip">登录即同意<text class="is-link" @click="goToAgr">《用户服务协议》</text></view>
        </form>


        <view class="footer">
          <!--  <view class="footer-item" @click="makeCall">联系客服</view>
            <view class="footer-item">使用帮助</view> -->
            <!-- <view class="footer-item">修改密码</view> -->
        </view>
    </view>
</template>

<script>
    const FormValidation = require('../../utils/formValidation');
    import util from '@/utils/util.js';
    export default {
        data() {
            return {
                username: '', //用户名
                password: '', //密码
                isShowUserClose: false, //是否显示用户清除按钮
                isShowPassClose: false, //是否显示密码清除按钮
            }
        },
        onLoad() {
            let self = this;
            //初始化验证
            this.initValidate();
            self.$store.dispatch('device/setDeviceInfo').then(function(res) {
                console.log('设备信息写入成功');
            })
        },
        methods: {
            //前往服务协议页面
            goToAgr() {
                uni.navigateTo({
                    url: '/pages/agreement/agreement'
                })
            },
            //联系客服
            makeCall() {
                uni.makePhoneCall({
                    phoneNumber: '4008756066'
                });
            },
            /**
             * 验证初始化
             */
            initValidate() {
                // 验证字段的规则
                const rules = {
                    username: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                };

                // 验证字段的提示信息，若不传则调用默认的信息
                const messages = {
                    username: {
                        required: '请输入用户名'
                    },
                    password: {
                        required: '请输入密码',
                        minlength: '密码长度不少于6位',
                    }
                };

                // 创建实例对象
                this.FrmValidate = new FormValidation(rules, messages)
            },

            /**
             * 表单提交
             */
            loginFormSubmit(e) {
                const data = e.detail.value;
                // 传入表单数据，调用验证方法
                if (!this.FrmValidate.checkForm(data)) {
                    const error = this.FrmValidate.errorList[0];
                    uni.showToast({
                        title: error.msg,
                        icon: 'none'
                    })
                    return false
                }

                this.username = data.username;
                this.password = data.password;
                //登录
                this.login();
            },
            /**
             * 用户账号监听
             */
            userInput(e) {
                let value = e.detail.value;
                value ? this.isShowUserClose = true : this.isShowUserClose = false;
            },
            /**
             * 密码监听
             */
            passInput(e) {
                let value = e.detail.value;
                value ? this.isShowPassClose = true : this.isShowPassClose = false;
            },
            /**
             * 账号清除
             */
            userClear() {
                this.username = '';
                this.isShowUserClose = false
            },
            /**
             * 密码清除
             */
            passClear() {
                this.password = '';
                this.isShowPassClose = false
            },
            /**
             * 登录
             */
            login() {
                let self = this;
                let temp = {
                    username: this.username, //用户名
                    password: this.password //密码
                };
                let info = {};

                uni.showLoading({
                    title: '登录中...'
                });

                Object.assign(info, self.$store.state.device.deviceInfo, temp);
                self.$store.dispatch('user/loginState', info).then(function(res) {
                    wx.hideLoading();
                    let rdata = res.data;
                    if (rdata.status == 0 && rdata.data) {
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    } else {
                        uni.showToast({
                            title: rdata.message,
                            icon: 'none'
                        })
                    }
                }).catch(function(err) {
                    wx.hideLoading();
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                })
            }
        }
    }
</script>

<style>
    .container {
        padding: 0 30upx;
    }

    .img-container {
        padding: 210upx 0 30upx 0;
    }

    .img-container .img {
        display: block;
        width: 140upx;
        height: 140upx;
        border-radius: 14upx;
        margin: 0 auto;
    }

    .img-text {
        font-size: 34upx;
        text-align: center;
        color: #333;
        margin-bottom: 60upx;
    }

    .input-item {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 10upx;
        width: 100%;
        height: 80upx;
        margin-bottom: 40upx;
    }

    .input-item:hover {
        border-color: #3c67c2;
        box-shadow: 0 0 6upx #3c67c2;
    }

    .input-item .icon.iconmy,
    .input-item .icon.iconlock {
        flex: 1;
        font-size: 40upx;
        color: #666;
        text-align: center;
        line-height: 80upx;
    }

    .input-item .input-box {
        flex: 8;
    }

    .input-item .input-box .input {
        width: 100%;
        padding: 20upx 10upx;
        font-size: 32upx;
        color: #333;
    }

    .input-item .right {
        flex: 1;
        text-align: center;
    }

    .input-item .right .icon {
        font-size: 40upx;
        color: #999;
        line-height: 80upx;
    }

    .button-container {
        box-sizing: border-box;
        width: 100%;
        padding: 20upx 0;
    }

    .button-container .button {
        box-sizing: border-box;
        width: 100%;
        height: 80upx;
        font-size: 32upx;
        background-color: #3c67c2;
        border-radius: 10upx;
        line-height: 80upx;
        text-align: center;
        color: #fff;
    }

    .tip {
        background-color: #ebf5ff;
        font-size: 24upx;
        color: #666;
        padding: 14upx 10upx;
        border-radius: 8upx;
        text-align: center;
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 90upx;
    }

    .footer .footer-item {
        position: relative;
        flex: 1;
        font-size: 28upx;
        text-align: center;
        color: #666;
    }

    .footer .footer-item:after {
        position: absolute;
        right: 0;
        top: 6upx;
        content: '';
        width: 2upx;
        height: 30upx;
        background-color: #ccc;
    }

    .footer .footer-item:last-child:after {
        display: none;
    }
</style>
